import { data } from "browserslist";
import React, {
  Component,
  forwardRef,
  useRef,
  useImperativeHandle,
  useEffect,
} from "react";
/* 
zustand 库
*/
import { create } from "zustand";
const useStore = create((set) => ({
  count: 2,
  name: "zs",
  increment: () =>
    set((state) => ({count:state.count+1})),
  decrement: () => set((state) => ({ count: state.count - 1 })),

  dataList: [],
  fetchData: () => {
    /* 异步模式 */
    setTimeout(() => {
      set({
        dataList: [
          { name: "zs", age: "13" },
          { name: "ls", age: "19" },
        ],
      });
    }, 1000);
  },
}));
export default function UseZustand() {
  const { count, increment, decrement, name, fetchData, dataList } = useStore();
  useEffect(() => {
    fetchData();
  }, []);
  return (
    <div>
      <h1>zustand的使用</h1>
      <p>{count}</p>
      <p>{name}</p>
      <button onClick={increment}>count++</button>
      <button onClick={decrement}>count--</button>
      <p>接口数据：</p>
      {dataList.map((item) => {
        return (
          <div key={item.age}>
            {item.name}
            {item.age}
          </div>
        );
      })}
    </div>
  );
}
